<template>
  <div class="default-main">
    <el-row :gutter="20">
      <el-col class="xs-mb-20" :xs="24" :sm="24" style="padding: 0">
        <el-tabs type="border-card">
          <el-tab-pane class="config-tab-pane" label="台账文件管理">
            <el-row :gutter="20">
              <el-col class="xs-mb-20" :xs="24" :sm="24" :lg="12">
                <el-card shadow="always" header="台账目录列表">
                  <Directory @on-show-price-list="showList" />
                </el-card>
              </el-col>
              <!-- 目录文件 -->
              <el-col class="xs-mb-20" :xs="24" :sm="24" :lg="12">
                <el-card shadow="always" header="目录文件列表">
                  <template #header>
                    <div class="card-header">
                      <span>目录名称：{{ state.row.fileName }}</span>
                      <el-button
                        v-if="state.showForm"
                        v-blur
                        @click="onAction"
                        class="table-header-operate"
                        type="primary"
                      >
                        <el-icon>
                          <Plus />
                        </el-icon>
                        <span class="table-header-operate-text">添加</span>
                      </el-button>
                    </div>
                  </template>
                  <File v-if="state.showForm" @on-put="openPut" />
                  <div v-else>请选择台账目录</div>
                </el-card>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <!-- 新增文件表单 -->
    <AddItem v-model="state.showAddForm" />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, onBeforeUnmount, inject } from "vue";
import { useDeviceWarnSet } from "@/store/backend/DeviceM/warnSet";
import Directory from "./directory.vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import File from "./File.vue";
import { baTableApi } from "@/utils/common"; // 导入表格api方法生成器
import type { FormInstance, ElForm, FormRules } from "element-plus";
import AddItem from "./filePopupForm.vue";

const warnSet = useDeviceWarnSet();
const formRef = ref<FormInstance>(); //添加配置项的表单
const { proxy } = useCurrentInstance(); //mitt


//验证规则
const rules = reactive<FormRules>({
  name: [],
  group: [],
  title: [],
  type: [],
  weigh: [],
});

interface anyObj {
  [key: string]: any;
}
const state: {
  showAddForm: boolean; //是否显示给设备新增配置项
  showForm: boolean; //是否展示设备配置列表
  warnSetList: anyObj[];
  row: anyObj; //设备基础信息
} = reactive({
  showAddForm: false,
  showForm: false,
  warnSetList: [],
  row: {},
});

//接收price子组件传递的服务项目数据 打开定价配置列表
const showList = (row: any) => {
  state.showForm = true; //显示定价配置列表
  state.row = row;
};

//打开添加文件表单
const onAction = () => {
  // setPrice.opera = "add";
  proxy.eventBus.emit("addFile", state.row);
  state.showAddForm = true;
};
//打开编辑文件表单
const openPut = (data: any) => {
  proxy.eventBus.emit("editFile", data);
  state.showAddForm = true;
};

//初始化
onMounted(() => {});
// proxy.eventBus.on("devicesWarnList", (data: any) => {
//   state.showForm = true;
// });

//离开页面清空mitt
onBeforeUnmount(() => {
  // proxy.eventBus.off("addPriceSet");
  // proxy.eventBus.off("editPriceSet");
  // proxy.eventBus.off("changePriceId");
});
</script>
<style lang="scss" scoped>
.default-main {
  //   margin: var(--ba-main-space) var(--ba-main-space) 60px var(--ba-main-space);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .xs-mb-20 {
    margin-bottom: 20px;
  }
}
</style>
